<template>
  <div class="headers">
    <div class="headers-left">
      <div :class="asideShow === false ? 'headers-left-active' : ''" class="headers-left-box" @click="targetIcon">
        <i class="el-icon-s-fold "></i>
      </div>
      <Breadcrumb/>
    </div>
    <div class="headers-right">
      <div class="headers-right-right">
        <div class="block">
          <el-avatar :src="squareUrl" class="avatarImg" shape="square" size="large"></el-avatar>
        </div>
        <el-dropdown size="medium" @command="handleCommand">
                    <span class="el-dropdown-link">
                        {{ name }}<i class="el-icon-arrow-down el-icon--right"></i>
                    </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="quit" divided>退出登录</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </div>
  </div>
</template>


<script>
// 面包屑
import Breadcrumb from '../Breadcrumb/Breadcrumb'
import store from '../../store/index'

export default {
  props: {
    asideShow: {
      type: Boolean,
      default: true
    },
    themeColor: {
      type: Array,
      default: true
    },
    themeIndex: {
      type: Number,
      default: true
    }
  },
  data() {
    return {
      squareUrl: (window.localStorage.getItem("avatar") && window.localStorage.getItem("avatar") !== 'null') ? window.localStorage.getItem("avatar") : "https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png",
      isFullscreen: false,
      name: window.localStorage.getItem("userName")
    }
  },
  components: {
    Breadcrumb,
    screen,
  },
  methods: {
    // 自定义 切换 侧边栏 事件
    targetIcon() {
      this.$emit('targetIcon', !this.asideShow)
    },
    // 用户名 下拉菜单
    handleCommand(command) {
      switch (command) {
        case 'quit':
          window.localStorage.clear()
          this.$router.replace('/login')
          // this.$store.state.user.roles = []
          window.location.reload()
          break;
      }
    },
  },
  created() {
  },
  mounted() {
    // 浏览器窗口改变事件
    this.isFullscreen = document.body.scrollHeight === window.screen.height
  }
}
</script>

<style scoped>
.headers {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-between;
}

.headers-left {
  display: flex;
  justify-content: flex-start;
}

.headers-left-box {
  transition: all 0.5s;
  transform-origin: center center;
  width: 20px;
  height: 100%;
  margin-right: 15px;
}

.el-icon-s-fold {
  width: 20px;
  height: 100%;
  line-height: 50px;
  font-size: 20px;
  cursor: pointer;

}

.el-breadcrumb {
  line-height: 50px;
}

.headers-right {
  /* width: 200px; */
  height: 100%;
  /* background: orchid; */
  display: flex;
  justify-content: space-around;
}

.headers-right-right {
  display: flex;
  justify-content: space-around;
  align-items: center;
  color: #666666;
}

.block {
  margin-right: 15px;
}

.el-dropdown-link {
  cursor: pointer;
}

.avatarImg img {
  margin: 0 auto;
}

::v-deep .el-avatar img {
  width: 100%;
  height: 100%;
}
</style>
